<template>
  <div>
    <!-- gutter指定这一行中列与列之间的槽宽 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <TodaySale></TodaySale>
        </el-col>
        <el-col :span="6">
          <TodayOrder></TodayOrder>
        </el-col>
        <el-col :span="6">
          <TradeUser></TradeUser>
        </el-col>
        <el-col :span="6">
          <TotalUser></TotalUser>
        </el-col>
      </el-row> 
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'TopView',
})
</script>

<script lang="ts" setup>
import TodaySale from './TodaySale/index.vue'
import TodayOrder from './TodayOrder/index.vue'
import TradeUser from './TradeUser/index.vue'
import TotalUser from './TotalUser/index.vue'
</script>

<style scoped>
:deep(.left){
  margin-left:20px
}
:deep(.up){
  border:5px solid red;
  border-top-color: transparent;
  border-left-color:transparent;
  border-right-color:transparent;
}
:deep(.down){
  border:5px solid blue;
  border-bottom-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent
}
</style>
  